<template>
  <table class="ui column table striped selectable ">
    <thead>
      <tr>
        <!-- <th v-for="btn in buttons">{{btn.label}}</th> -->
        <th v-for="column in columns">
          <template v-if="column.buttons">
            {{column.buttons.label}}
          </template>
          <template v-else>
            {{column.label}}
          </template>
        </th>
      </tr>
    </thead>
    <tbody  v-if="data.length>0">
      <tr v-for="(fileds, index) in table">
        <td v-for="column in  columns" >
          <template v-if="column.buttons" >
            <button class="ui compact icon button" v-for="btn in column.buttons.btns" :class="{disabled: btn.disabled || index == 0 && btn.name=='up' || index == table.length-1 && btn.name=='down',
              tlink: btn.islink,
              mini: btn.size == 'mini' ,
              tiny: btn.size == 'tiny',
              small: btn.size == 'small' ,
              medium: btn.size == 'medium',
              large: btn.size == 'large',
              big: btn.size == 'big',
              huge: btn.size == 'huge',
              massive: btn.size == 'massive'}" @click="btnAction(btn.name, index, fileds)">
              <i class="arrow icon" :class="btn.name"></i>{{btn.label}}
            </button>
          </template>
          <template v-else>
            <div v-html="columnHtml(fileds[column.filed], column.default )"></div>
          </template>
        </td>
      </tr>
    </tbody>
    <tbody v-else>
      <tr>
        <td :colspan="columns.length" class="disabled center aligned">{{placeholder}}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
  import tool from 'src/util/tool';
//  import myDatepicker from 'vue-datepicker'
  import myDatepicker from 'components/common/vue-datepicker'

  export default {
    data(){
      return {
        table:[]
      }
    },
    props:{
      data: {
        type: Array,
        default: function() {
          return [];
        }
      },
      tableName: {
        type: String,
        default: function() {
          return "";
        }
      },
      buttons:{
        type: Array,
        default: function() {
          return [];
        }
      },
      columns:{
        type: Array,
        default: function() {
          return [];
        }
      },
      placeholder:{
        type: String,
        default: function(){
          return "未找到数据"
        }
      }
    },
    watch:{
      data: {
        immediate: true,
        handler(val) {
          this.table = val;
        }
      },
      buttons: {
        immediate: true,
        handler(val) {
        }
      },
      columns: {
        immediate: true,
        handler(val) {
        }
      },
      tableName: {
        immediate: true,
        handler(val) {
        }
      },
    },
    methods:{
      btnAction(type, index, row){
        this.$emit("onclickBtn", {type: type, rowIndex: index, row: row, tableName: this.tableName})
      },
      columnHtml(val, defVal = ""){
        if(typeof(val) == "boolean"){
          return val;
        }
        if(!val || ( Array.isArray(val) && val.length == 0 ) ){
          return defVal;
        }
        if(Array.isArray(val)){
          val = val.map((v)=>{
            return '<span class="ui label">'+v+'</span>'
          });
          return val.join("");
        }
        return val
      }
    },
  }
</script>

<style rel="stylesheet/less" lang="less" scoped>
  .ui.icon.button.tlink{
    background-color: transparent;
    color: #4183c4;
    font-weight: normal;
  }
</style>
